<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { detailStoreAPI, getStoreCollectStatusAPI, editStoreStatusAPI } from '@/services/store'
import type { IstorePageParam, IStoreCollectParam, IstoreItem } from '@/types/store'
import { useMemberStore } from '@/stores'
const { getUserInfo } = useMemberStore()

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 接收页面参数
const query = defineProps<{
  id: string
}>()

const latitude = ref(0)
const longitude = ref(0)
const markers = ref([] as any[])
const isCollect = ref(0)

const storeInfo = ref({} as IstoreItem)

onShow(async () => {
  detailStoreAPI(query.id).then((res: any) => {
    storeInfo.value = res.data
    latitude.value = res.data.latitude
    longitude.value = res.data.longitude
    markers.value = [
      {
        title: res.data.storeName,
        address: res.data.address,
        alpha: 1,
        width: 30,
        height: 30,
        id: Number(res.data.storeId),
        telephone: '(0350)2118666',
        latitude: res.data.latitude,
        longitude: res.data.longitude,
        iconPath: '../../static/img/red_marker.png',
        iconTapPath: '../../static/img/red_marker.png',
        label: res.data.storeName,
        callout: {
          content: res.data.storeName,
          display: 'ALWAYS',
        },
      },
    ]
  })
  const collectRes = await getStoreCollectStatusAPI({
    storeId: query.id,
    userId: getUserInfo()?.id,
  })
  isCollect.value = collectRes.data as number
})
const editStatuhandle = async () => {
  const isCollectValue = isCollect.value === 1 ? 0 : 1
  await editStoreStatusAPI({
    storeId: query.id,
    userId: getUserInfo().id,
    collectStatus: isCollectValue,
  })

  isCollect.value = isCollectValue
}

const goStoreMap = () => {
  // 打开系统位置地图
  uni.openLocation({
    latitude: latitude.value,
    longitude: longitude.value,
    address: storeInfo.value.address,
    name: storeInfo.value.storeName,
    scale: 14,
    success: function (res) {
      console.log('打开系统位置地图成功')
    },
    fail: function (error) {
      console.log(error)
    },
  })
}

// 拨打电话方法
const callPhone = (phoneNumber: any) => {
  if (!phoneNumber) {
    uni.showToast({
      title: '号码为空',
      icon: 'error',
      duration: 1500,
    })
    return
  }

  uni.makePhoneCall({
    phoneNumber: phoneNumber,
    success: () => {
      console.log('拨打电话成功')
    },
    fail: (err) => {
      // 用户可能取消操作
      if (err.errMsg.includes('cancel')) {
        uni.showToast({
          title: '已取消拨打',
          icon: 'none',
          duration: 1500,
        })
      } else {
        uni.showToast({
          title: '拨打失败',
          icon: 'error',
          duration: 1500,
        })
      }
      console.error('拨号失败：', err)
    },
  })
}
</script>

<template>
  <scroll-view scroll-y class="store-detail-main" enable-back-to-top>
    <view class="store-detail-page">
      <view class="header">
        <text class="title">{{ storeInfo.storeName }}</text>
        <text class="collected" :class="{ active: isCollect === 1 }" @tap="editStatuhandle"
          >收藏门店</text
        >
      </view>
      <view class="coupon">
        <text v-for="citem in storeInfo.couponNames" :key="citem">{{ citem }}</text>
      </view>
      <view class="info">
        <view class="address">
          <text class="icon"></text>
          <view class="address-info">
            <text class="con">{{ storeInfo.address }}</text>
            <view class="btn-group">
              <text class="copy" @click="copyPageUrl">复制地址</text>
              <text class="btn" @tap="goStoreMap">导航</text>
            </view>
          </view>
        </view>

        <view class="phone">
          <text class="icon"></text>
          <view class="phone-info">
            <text @click="callPhone(storeInfo.phoneNumber)">{{ storeInfo.phoneNumber }}</text>
          </view>
        </view>
        <view class="bussiness-time">
          <text class="icon"></text>
          <view class="bussiness-info">
            <text class="title">门店营业时间</text>
            <!-- <text>周一至周四 09:00-22:00</text>
            <text>周五至周六 09:00-23:00</text>
            <text>周日 09:00-22:00</text> -->
            <text>{{ storeInfo.operatingHours }}</text>
            <template v-if="storeInfo.takeoutHours">
              <text class="title last">外卖营业时间</text>
              <text>{{ storeInfo.takeoutHours }}</text>
            </template>
            <!-- <text>周一至周四 09:00-22:00</text>
            <text>周五至周日 09:00-22:30</text> -->
          </view>
        </view>
      </view>
      <view class="map_container">
        <map
          id="map"
          style="width: 100%; height: 300rpx"
          :latitude="latitude"
          :longitude="longitude"
          :scale="14"
          :show-location="false"
          :markers="markers"
        ></map>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';
page {
  height: 100%;
  overflow: hidden;
}
.store-detail-main {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.store-detail-page {
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    background-color: #fff;

    .title {
      font-size: 48rpx;
      font-weight: bold;
      color: $good-font-title-color;
    }

    .collected {
      margin-top: auto;
      font-size: $font-size;
      color: #2e7d32;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;

      &::before {
        content: '\e6ef';
        font-family: 'iconfont' !important;
        color: $color;
        font-size: 40rpx;
      }

      &.active {
        &::before {
          content: '\e6ee';
          font-family: 'iconfont' !important;
          color: $color;
          font-size: 40rpx;
        }
      }
    }
  }

  .coupon {
    background-color: #fff;
    padding: 10rpx 32rpx;
    display: flex;
    flex-direction: column;

    text {
      font-size: $font-size;
      color: #e53935;
      margin-bottom: 10rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      &::before {
        content: '\eb47';
        font-family: 'iconfont' !important;
        color: #e53935;
        font-size: 40rpx;
        margin-right: 32rpx;
      }
    }
  }

  .info {
    margin: 32rpx;
    border-radius: 32rpx;
    padding: 32rpx;
    background-color: $background-color;
    .address {
      margin-bottom: 10rpx;
      display: flex;
      flex-direction: row;
      .icon {
        margin-bottom: auto;
        margin-right: 32rpx;
        ::before {
          content: '\e61a';
          font-family: 'iconfont' !important;
          color: #2e7d32;
          font-size: 40rpx;
        }
      }

      .address-info {
        display: flex;
        flex-direction: column;
        .con {
          font-size: $font-medium-size;
          color: $good-font-title-color;
          margin-bottom: 10rpx;
        }
        .btn-group {
          display: flex;
          align-items: center;
          gap: 20rpx;
        }
        .copy,
        .btn {
          padding: 0 32rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: $font-size;
          color: #fff;
          cursor: pointer;
          border-radius: 30rpx;
          background-color: #2e7d32;
        }

        .btn {
          display: flex;
          align-items: center;
          color: #2e7d32;
          cursor: pointer;
          border-radius: 30rpx;
          border: 1px solid #2e7d32;
          background-color: #fff;
          &::before {
            content: '\e6c9';
            font-family: 'iconfont' !important;
            color: #2e7d32;
            font-size: 40rpx;
            margin-right: 4rpx;
          }
        }
      }
    }

    .phone {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 32rpx 0;
      .icon {
        margin-bottom: auto;
        margin-right: 32rpx;

        &::before {
          content: '\e842';
          font-family: 'iconfont' !important;
          color: #2e7d32;
          font-size: 40rpx;
        }
      }
      .phone-info {
        font-size: $font-size;
        color: #2e7d32;
      }
    }

    .bussiness-time {
      display: flex;
      flex-direction: row;

      .icon {
        margin-bottom: auto;
        margin-right: 32rpx;
        display: flex;
        align-items: center;
        &::before {
          content: '\e607';
          font-family: 'iconfont' !important;
          color: #2e7d32;
          font-size: 40rpx;
        }
      }
      .bussiness-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        text {
          font-size: $font-size;
          color: #4b5563;
          margin-bottom: 10rpx;
        }
        .title {
          font-size: $font-medium-size;
          color: $good-font-title-color;
          font-weight: $font-weight;
          margin-bottom: 20rpx;
          &.last {
            margin-top: 20rpx;
          }
        }
      }
    }
  }
  .map_container {
    padding: 0 20rpx 20rpx;
  }
}
</style>
